<template>
  <view v-if="info.serve">
    <u-navbar :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" title="整体治疗方案" :immersive="true" :border-bottom="false"></u-navbar>

    <view class="" style="width: 100%; height: 150rpx; background: url(https://wenzhen.fuerle168.com/static/index/bg.png) no-repeat; background-size: 100% 100%"></view>
    <view class="" v-if="info.serve.dispatcher_admin_img && info.serve.drug_shop_id != 0">
      <view
        class=""
        style="
          margin: 0 28rpx;
          background: #fff;
          box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
          border-radius: 20rpx;
          text-align: center;
          padding-bottom: 41rpx;
          margin-top: 0rpx;
        "
        v-if="!address"
        @tap="huan"
      >
        <image src="https://wenzhen.fuerle168.com/static/index/g0.png" mode="" style="width: 130rpx; height: 130rpx"></image>
        <view class="" style="display: flex; align-items: center; font-size: 28rpx; justify-content: center">
          <image src="https://wenzhen.fuerle168.com/static/index/add.png" mode="" style="width: 32rpx; height: 32rpx"></image>
          <view class="" style="padding-left: 15rpx">添加收货地址</view>
        </view>
      </view>
      <view class="" style="margin: 0 28rpx; background: #fff; box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1); border-radius: 20rpx; padding-bottom: 41rpx" @tap="huan" v-else>
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 35rpx 29rpx 27rpx 38rpx">
          <view class="" style="">
            <!-- {{address}} -->
            <text style="font-size: 30rpx; font-weight: bold">{{ address.name }}</text>
            <text style="font-size: 26rpx; padding-left: 10rpx">{{ address.mobile }}</text>
          </view>
        </view>
        <view class="" style="font-size: 28rpx; padding: 0 38rpx">{{ address.city }} {{ address.details }}</view>
      </view>
      <!-- 请选择快递公司 -->
      <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 48rpx">
        <view class="" style="font-size: 32rpx; font-weight: bold; padding: 39rpx 34rpx">请选择快递公司</view>
        <view
          class=""
          style="display: flex; align-items: center; justify-content: space-between; padding: 34rpx 38rpx; border-bottom: 1rpx solid #e7e7e7"
          v-for="(i, k) in list"
          :key="k"
          @tap="(current = k), (radio = 0)"
        >
          <view class="">
            <view class="" style="font-size: 28rpx">
              {{ i.express_name }}
            </view>
          </view>
          <view class="">
            <radio :checked="current == k ? true : false" color="#15A9FF" style="transform: scale(0.7)"></radio>
          </view>
        </view>

        <view
          class=""
          style="display: flex; align-items: center; justify-content: space-between; padding: 34rpx 38rpx"
          @tap="(radio = 3), (current = 5)"
          v-if="info.serve.drug_shop_id != 0"
        >
          <view class="">
            <view class="" style="font-size: 28rpx">自提地址</view>
          </view>
          <view class="">
            <radio :checked="radio == 3 ? true : false" color="#15A9FF" style="transform: scale(0.7)"></radio>
          </view>
        </view>
        <view
          class=""
          v-if="radio == 3"
          style="margin: 0 17rpx; background: #f8f8f8; font-size: 28rpx; display: flex; align-items: center; justify-content: space-between; padding: 26rpx"
        >
          <view class="">
            {{ info.serve.drug_shop_address }}
          </view>
          <view class=""></view>
        </view>
      </view>
    </view>

    <!-- 处方 -->
    <!-- 处方 -->
    <view class="" style="margin: 21rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="font-size: 32rpx; font-weight: bold; text-align: center; padding-top: 32rpx">处方</view>
      <view class="" style="display: flex; align-items: center; justify-content: space-around; margin-top: 25rpx" v-if="info.serve">
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">姓名</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">
            {{ info.serve.patient_name }}
          </view>
        </view>
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">性别</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">
            {{ info.serve.patient_gender == 1 ? '男' : '女' }}
          </view>
        </view>
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">年龄</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">{{ info.serve.patient_age }}岁</view>
        </view>
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">科室</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">
            {{ info.department_name }}
          </view>
        </view>
      </view>
      <!-- 诊断 -->
      <view class="" style="font-size: 28rpx; padding: 25rpx 29rpx; border-bottom: 1rpx solid #e7e7e7" v-if="info.serve">诊断：{{ info.serve.Illness }}</view>
      <!-- RP：处方西药 -->
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx">
        <view class="" style="font-size: 28rpx">RP：处方西药</view>
        <view class="" style="font-size: 26rpx; color: #666666">
          {{ info.extract_time_text }}
        </view>
      </view>

      <!-- 药 -->
      <view class="" style="margin: 0 28rpx; background: #f8f8f8" v-for="(item, index) in info.drgus" :key="index">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx 19rpx 24rpx 22rpx">
          <view class="" style="font-size: 28rpx">{{ index + 1 }}、{{ item.drugs_name }}</view>
          <view class="" style="font-size: 24rpx; color: #666666">使用天数：{{ item.usage_days }}天</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #666666; padding-left: 23rpx">药品规格：{{ item.norms }}</view>
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 23rpx 15rpx 33rpx 24rpx; font-size: 24rpx; color: #666666">
          <view class="">发药剂量：*{{ type == 1 ? item.number : item.number.number }}</view>
          <view class="">用法：{{ item.usage }}</view>
        </view>
      </view>
      <view class="" style="height: 32rpx; border-bottom: 1rpx solid #e7e7e7"></view>
      <!--  -->
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7" v-if="info.serve">
        <text>医嘱：</text>
        <text style="padding-left: 30rpx">{{ info.serve.tips }}</text>
      </view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7; display: flex; align-items: center">
        <text>医师：</text>
        <image :src="img_url + info.doctor_chapter_img" mode="" style="width: 150rpx; height: 50rpx; padding-left: 30rpx"></image>
      </view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7; display: flex; align-items: center" v-if="info.serve.pharmacist_admin_img">
        <text>药师：</text>
        <!-- <text style="padding-left: 30rpx;">{{info.serve.pharmacist_admin_img}}</text> -->
        <image :src="img_url + info.serve.pharmacist_admin_img" mode="" style="width: 150rpx; height: 50rpx; padding-left: 30rpx"></image>
      </view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7; display: flex; align-items: center" v-if="info.serve.pharmacist_admin_img">
        调配员：
        <image
          :src="img_url + info.serve.dispatcher_admin_img"
          mode="aspectFill"
          style="width: 150rpx; height: 50rpx; padding-left: 30rpx"
          v-if="info.serve.dispatcher_admin_img"
        ></image>
        <text v-else>调配员正在审核中，请耐心等待...</text>
      </view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx" v-if="info.serve.dispatcher_admin_img">
        发药员：{{ info.serve.driver_admin_img ? info.serve.driver_admin_img : '等待发药...' }}
      </view>
    </view>
    <!-- 费用 -->
    <view class="" style="font-size: 28rpx; background: #fff; border-radius: 20rpx; margin: 30rpx 28rpx" v-if="info.serve.dispatcher_admin_img && info.serve.drug_shop_id != 0">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx">
          费用
          <text style="color: #666666; font-size: 24rpx; padding-left: 25rpx">按方开药</text>
        </view>
        <view class="" style="font-size: 26rpx">￥{{ info.serve.drugs_price }}</view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx">运费</view>
        <view class="">￥{{ current == 5 ? 0 : list[current].express_price }}</view>
      </view>
      <!-- <view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 28rpx ;border-bottom: 1rpx solid #E7E7E7;">
			 	 <view class="" style="font-size: 28rpx;">
			 	 	优惠券
			 	 </view>
			 	 <view class="">
			 	 	￥10.00
			 	 </view>
			 </view> -->
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx">
        <view class="" style="font-size: 28rpx">合计</view>
        <view class="" style="color: #e50014">￥{{ current == 5 ? info.serve.drugs_price : Number(info.serve.drugs_price) + Number(list[current].express_price) }}</view>
      </view>
    </view>
    <!-- <view class="" style="font-size: 24rpx;color: #999999;padding-left: 47rpx;">
			 <text>*支付及表示同意</text>
			 <text style="font-size: 24rpx;color: #1A9EFF;">《互联网诊疗告知及通知书》</text>
		</view> -->
    <view class="" style="font-size: 24rpx; color: #999999; padding-left: 47rpx; padding-top: 35rpx">*处方有效期为3天</view>
    <!-- <view class="" style="font-size: 24rpx;color: #999999;padding-left: 47rpx;padding-top: 28rpx;">
			 *物流及药品投诉电话：0381-6666666
		</view> -->
    <view class="" style="height: 100rpx"></view>

    <!-- 底部栏 -->
    <view
      class=""
      style="
        background: #fff;
        position: fixed;
        bottom: 0;
        height: 99rpx;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
      v-if="info.serve.dispatcher_admin_img && info.serve.drug_shop_id != 0"
    >
      <view class="" style="text-align: center; padding-left: 52rpx" @tap="show = true">
        <image src="https://wenzhen.fuerle168.com/static/shop/erji.png" mode="" style="width: 44rpx; height: 44rpx"></image>
        <view class="" style="font-size: 24rpx">客服</view>
      </view>

      <!-- 按钮 -->
      <view class="" style="display: flex; align-items: center; padding-right: 21rpx">
        <view class="" style="font-size: 28rpx; padding-right: 44rpx">
          <text>实付：</text>
          <text style="color: #e50014">￥{{ current == 5 ? info.serve.drugs_price : (Number(info.serve.drugs_price) + Number(list[current].express_price)).toFixed(2) }}</text>
        </view>
        <!-- {{parent}} -->
        <view class="btn" @tap="shows = true">去支付</view>
      </view>
    </view>

    <!-- 协议 -->
    <uni-popup backgroundColor="#FFF" type="center" ref="pop_xy">
      <view class="po-rela" style="padding: 54rpx 45rpx; width: 532rpx" v-if="info.serve && info.serve.Illness">
        <view class="text-center font30 col-333">{{ info.doctor_name }}为您本次诊断为</view>
        <view class="flex align-center justify-center margin-top-sm">
          <view
            class="text-center font26 flex align-center justify-center"
            :style="'background: url(' + img + '/web/bbg.png) no-repeat;background-size: cover;width: 288rpx;height: 48rpx;color: #0087FE;'"
          >
            {{ info.serve.Illness }}
          </view>
        </view>
        <view class="font26 col-666" style="margin-top: 33rpx; line-height: 42rpx">请确认您在实体医疗机构有过该诊断就 诊，并已将病历资料提供给医生</view>
        <view class="flex justify-center align-center" style="margin-top: 34rpx; line-height: 39rpx">
          <radio :checked="radio" color="#0087FE" style="transform: scale(0.6)" @tap="radio = !radio"></radio>
          <view class="flex-sub font24 padding-left-xs letter col-999">
            <text class="" @tap="radio = !radio">确认并同意</text>
            <text style="color: #63b6ff" @tap="util.urlTo('../index/xieyi?type=3')">《互联网诊疗风险告知及同意书》</text>
          </view>
        </view>
        <view class="flex align-center justify-center" style="margin-top: 60rpx">
          <view @click="closecf(1)" class="btnbg" style="width: 440rpx; height: 80rpx">确认查看处方</view>
        </view>
        <view @click="closecf(2)" class="cuIcon-close" style="position: absolute; right: 24rpx; top: 24rpx"></view>
      </view>
    </uni-popup>

    <u-popup v-model="shows" mode="bottom" border-radius="14">
      <view class="" style="margin: 28rpx; box-shadow: 0px 0px 10rpx 0px rgba(70, 70, 70, 0.05); background: #fff; border-radius: 20rpx">
        <view class="" style="padding: 31rpx; font-size: 32rpx; font-weight: bold">支付方式</view>
        <!-- <view class="flex align-center" @tap="pays=0;"
						style="padding: 0 31rpx 0 31rpx;display: flex;align-items: center;justify-content: space-between;">
						<view class="" style="display: flex;align-items: center;">
							<image src="http://wenzhen.jiangkukeji360.com/static/index/wxpay.png" mode="" style="width: 70upx;height: 70upx;"></image>
							<view class="flex-sub margin-left-sm" style="font-size: 28rpx;padding-left: 12rpx;">
								微信支付
							</view>
						</view>
				
						<radio :checked="pays==0?true:false" color="#1A9EFF" style="transform: scale(.7);"></radio>
					</view> -->
        <view
          class="flex align-center margin-top"
          @tap="pays = 1"
          style="padding: 0 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between; padding-top: 15rpx"
        >
          <view class="" style="display: flex; align-items: center">
            <image src="https://wenzhen.fuerle168.com/static/index/zfbpay.png" mode="" style="width: 70upx; height: 70upx"></image>
            <view class="flex-sub margin-left-sm" style="font-size: 28rpx; padding-left: 12rpx">支付宝支付</view>
          </view>

          <radio :checked="pays == 1 ? true : false" color="#1A9EFF" style="transform: scale(0.7)"></radio>
        </view>
        <view class="btns" @tap="pay">立即支付</view>
        <!-- <view class="" style="height: 30rpx;"></view> -->
      </view>
    </u-popup>
    <u-modal v-model="show" :content="'客服电话：' + userinfo.call_phone" title="" :show-cancel-button="true" confirm-text="呼叫" @confirm="confirm"></u-modal>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      radio: 0,
      show: false,
      shows: false,
      pays: 1,
      id: '',
      info: {},
      radio: false,
      img: this.util.api.img,
      list: [],
      current: 0,
      opend: null,
      address: null,
      userinfo: {},
      type: 1
    };
  },
  onLoad(e) {
    e.id ? (this.id = e.id) : '';
    if (e.type) {
      this.type = e.type;
    }

    this.add();
    // e.open ? this.open()  : ''
  },
  updated() {
    if (this.opend) {
      this.open();
    }
  },

  onShow() {
    this.getinfo();
    this.calss();
    this.user();
  },
  methods: {
    confirm() {
      uni.makePhoneCall({
        phoneNumber: this.userinfo.call_phone
      });
    },
    user() {
      this.api({
        url: '/api/user/index',
        method: 'post'
      }).then((res) => {
        this.userinfo = res.data;
      });
    },
    pay() {
      if (this.current == 5) {
        this.api({
          url: '/api//drugs/createPay',
          method: 'post',
          data: {
            id: this.info.serve.id,
            pay_type: this.pays == 0 ? 'wechat' : 'alipay',
            source: 'app',
            drgus_way: 1
          }
        }).then((res) => {
          uni.requestPayment({
            provider: this.pays == 0 ? 'wxpay' : 'alipay',
            orderInfo: res.data.response,
            success: function (res) {
              uni.navigateTo({
                url: '/shop/paysucc/paysucc?type=1' + '&pio=1'
              });
            },
            fail: function (err) {
              uni.navigateTo({
                url: '/shop/paysucc/paysucc?type=2'
              });
            }
          });
        });
      } else {
        if (!this.address) {
          uni.showToast({
            title: '请先选择收货地址',
            icon: 'none'
          });
          return false;
        }
        this.api({
          url: '/api/drugs/createPay',
          method: 'post',
          data: {
            id: this.info.serve.id,
            pay_type: this.pays == 0 ? 'wechat' : 'alipay',
            source: 'app',
            drgus_way: 2,
            express_id: this.list[this.current].id,
            address_id: this.address.address_id
          }
        }).then((res) => {
          uni.requestPayment({
            provider: this.pays == 0 ? 'wxpay' : 'alipay',
            orderInfo: res.data.response, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
            success: function (res) {
              uni.navigateTo({
                url: '/shop/paysucc/paysucc?type=1' + '&pio=1'
              });
            },
            fail: function (err) {
              uni.navigateTo({
                url: '/shop/paysucc/paysucc?type=2'
              });
            }
          });
        });
      }
    },
    huan() {
      uni.navigateTo({
        url: '/shop/address/address?type=2'
      });
    },
    add() {
      this.api({
        url: '/api//shop/getAddressDefault',
        metood: 'post'
      }).then((res) => {
        this.address = res.data;
      });
    },
    open() {
      console.log(this.$refs, '什么');
      this.$refs.pop_xy.open();
      this.opend = 1;
    },
    closecf(e) {
      if (e == 1) {
        if (!this.radio) {
          this.util.showToast('请阅读并同意同意书后查看');
          return false;
        }
        this.$refs.pop_xy.close();
      } else {
        uni.navigateBack();
      }
    },
    getinfo() {
      if (this.type == 2) {
        this.api({
          url: '/api/order/prescribeDetailsTo',
          method: 'post',
          data: {
            order_serve_id: this.id
          }
        }).then((res) => {
          this.info = res.data;
        });
      } else {
        this.util
          .request(
            'order/prescribeDetails',
            {
              order_id: this.id
            },
            'post'
          )
          .then((res) => {
            this.info = res;
          });
      }
    },
    calss() {
      this.api({
        url: '/api/index/getExpressList',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
        // this.list.push({'express_name':'院内自提','id':'type'})
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
.btn {
  width: 180rpx;
  height: 76rpx;
  background: linear-gradient(0deg, #e50014 0%, #ff6572 100%);
  border-radius: 38rpx;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  line-height: 76rpx;
}
.btns {
  height: 80rpx;
  margin: 75rpx 115rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
}
</style>
s
